// 该文件使用 commonJS 语法
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'), // 要处理的文件入口文件（主模块）
  output: { // 项目输出目录
    path: __dirname + '/dist', // 文件打包后，输出的目录
    filename: 'app.js',  // 输出文件名
    // filename: '[name].js',
    filename: '[name].[hash].js', // 生成随机 hash
  },
  mode: 'development', // 模式
  devServer: {
    // historyApiFallback: true, // 任意的 404 响应都会被替换为 index.html
    compress: true, // 开启 Gzip压缩
    port: 8080, // 端口号
    // open: true, // 是否自动打开浏览器
    // hot: true, // 热加载
    // proxy: { // 反向代理，解决开发时的跨域

    // }
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 导入这些文件时可以省略后缀
    alias: { // 路径别名
      '@': path.resolve(__dirname, 'src'),
      '_': path.resolve(__dirname, 'src/assets/images'),
    }
  },
  module: {
    rules: [
      // {
      //   test: /\.css$/, // 匹配要处理的文件
      //   use: ['style-loader', 'css-loader'], // 使用哪些loader来处理这些文件，loader处理顺序从右往左执行的
      //   // include: '', // 只匹配这个目录
      //   // exclude: '', // 排除这些目录
      // }
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif|webp|jpeg|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: { // loader 配置
            limit: 8192, // // 超过指定大小的图片需要 file-loader 做路径处理
            name: '[name].[hash:8].[ext]',
            esModule: false  // 可以允许在标签属性上使用 require 动态加载
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/, // 排除 node_modules 文件夹
        loader: 'babel-loader',  //注意 webpack2.x 是不支持 loader 简写
        options: { // loader的可选项
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      minify: { // 压缩
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 删除空白符和换行符
      }
    })
  ]
}